<template>
  <div class="content-body">
    <div class="left">
      <status-ratio :offline="radioData.offline" :online="radioData.online"></status-ratio>
      <latest-alarm @update="alarmUpdate"></latest-alarm>
    </div>
    <div class="right common-container">
      <water-pressure-status :device="alarm"></water-pressure-status>
      <water-pressure-trend :device="alarm"></water-pressure-trend>
    </div>
  </div>
</template>

<script>
  import StatusRatio from './StatusRatio'
  import LatestAlarm from './LatestAlarm'
  import WaterPressureStatus from './WaterPressureStatus'
  import WaterPressureTrend from './WaterPressureTrend'
  export default {
    name: 'Contentbody',
    components: {
      StatusRatio,
      LatestAlarm,
      WaterPressureStatus,
      WaterPressureTrend
    },
    props: {
      radioData: {
        type: Object,
        default () {
          return {
            online: 0,
            offline: 0
          }
        }
      }
    },
    data () {
      return {
        alarmList: [],
        alarm: null, // 传递给子组件的alarm
        index: 0,
        alarmInterval: null
      }
    },
    destroyed () {
      this.clearInterval()
    },
    methods: {
      /**
       * 子组件传过来最近的报警列表
       * */
      alarmUpdate (arr) {
        this.alarmList.splice(0)
        this.alarmList = arr
        if (arr.length !== 0) {
          this.alarm = this.alarmList[this.index]
          this.index ++
          this.loopAlarmList()
        }
      },
      /**
       * 循环最新的报警列表
       * */
      loopAlarmList () {
        this.clearInterval()
        this.alarmInterval = setInterval(() => {
          if (this.index === this.alarmList.length) {
            this.index = 0
          }
          this.alarm = this.alarmList[this.index]
          console.log('this.alarm ', this.alarm)
          this.index ++
        }, 1000 * 5)
      },
      /**
       * 清空定时器
       * */
      clearInterval () {
        if (this.alarmInterval) {
          clearInterval(this.alarmInterval)
          this.alarmInterval = null
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-body {
    display: flex;
    .left {
      width: 601px;
      margin-right: 20px;
    }
    .right {
      flex: 1;
      box-sizing: border-box;
      padding: 45px 70px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
  }
</style>
